<template>
    <div class="container">
        <div class="header">
            <mt-header title="能不能吃">
                <router-link to="/food" slot="left">
                    <mt-button icon="back"></mt-button>
                </router-link>
            </mt-header>
        </div>
        <div class="search">
            <mt-search
               
                placeholder="输入食物名称搜索">
            </mt-search>
            <div class="content">
                <div class="con">
                    <div class="left">
                        <img src="../../assets/bb6.jpg" alt="" srcset="">
                    </div>
                    <div class="right">
                        <h3>酒酿</h3>
                        <div>孕期 坐月子</div>
                        <span>宝宝不能吃</span>
                    </div>
                </div>

                <div class="con">
                    <div class="left">
                        <img src="../../assets/bb6.jpg" alt="" srcset="">
                    </div>
                    <div class="right">
                        <h3>酒酿</h3>
                        <div>孕期 坐月子</div>
                        <span>宝宝不能吃</span>
                    </div>
                </div>

                <div class="con">
                    <div class="left">
                        <img src="../../assets/bb6.jpg" alt="" srcset="">
                    </div>
                    <div class="right">
                        <h3>酒酿</h3>
                        <div>孕期 坐月子</div>
                        <span>宝宝不能吃</span>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</template>

<script>
import Vue from 'vue'
import { Search } from 'mint-ui';

Vue.component(Search.name, Search);

Vue.use(Search);

export default {
    methods: {
        
    },
   data() {
       return {
           
       }
   },
}
</script>

<style scoped>
    .mint-search{
        width: 100%;
        height: 52px;
    }
    .left{
        width: 100px;
        height: 100px;
        background: red;
         margin: 4% 4%;
         float: left;
    }
    .left img{
        width: 100px;
        height: 100px;
    }
    .right{
        border-bottom: 1px solid #cccccc;
        float: right;
        width: 65%;
        height: 80px;
         margin: 4% 0%;
         padding-top:6%
    }
  .right div,span{
      font-size: 12px !important;
      color: #cccccc;
      margin-top: 4px
  }
</style>